<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title><spring:message code="head.clothGarment"></spring:message>-<spring:message code="head.fabricDetail"></spring:message></title>
    <!--公共样式-->
    <link href="${pageContext.request.contextPath }/web/css/font/iconfont.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/NormalizeFile.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/public.css" />
    <!--详情页面私有样式-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/subpage/details.css" />
</head>
<body>
<div class="pagetitle"><spring:message code="fabric"></spring:message></div>
<jsp:include page="../main/head.jsp"></jsp:include>
<!--列表 begin-->
<div class="contenter mt134">
<c:if test="${not empty fabric }">
    <div class="lining-info-list">
           <div class="lining-info-list-br">
           		<div class="lining-info-list-img">
           			<img src="${pageContext.request.contextPath }/upload/${fabric.fImg}" />
          		</div>
          		<div class="select_color">
          			<h4><spring:message code="fabric.color"></spring:message></h4>
          			<div class="color_sel">
          				<c:if test="${fn:length(colorPic)>3 }">
          					<span class="le_arrow"></span>
          				</c:if>
          				<div class="sel_div">
          					<ul>
          						<c:forEach items="${colorPic }" var="color" varStatus="c">
          							<li id="${color.fmpImg }" <c:if test="${c.index==0 }">class="on"</c:if> onclick="check(this);"><img src="${pageContext.request.contextPath }/upload/${color.fmpImg}"><span></span></li>
          						</c:forEach>
          						<div class="clr"></div>
          					</ul>
          				</div>
          				<c:if test="${fn:length(colorPic)>3 }">
          					<span class="ri_arrow"></span>
          				</c:if>
          			</div>
          		</div>
      	   </div>
           <div class="lining-info-list-cont">
               <div class="lining-info-list-top">
               	<div class="lining-info-list-cont-cont">
                    <div class="lining-info-list-cont-left"><spring:message code="fabric.name"></spring:message>${fabric.fName}</div>
                    <div class="lining-info-list-cont-right"><spring:message code="fabric.no"></spring:message>${fabric.fNo}</div>
                    <div class="clearfix"></div>
               	</div>
                <div class="lining-info-list-cont-cont">
                   	<div class="lining-info-list-cont-left"><spring:message code="fabric.place"></spring:message>${fabric.fOrigin}</div>
                   	<div class="lining-info-list-cont-right"><spring:message code="fabric.supplier"></spring:message>${fabric.fMessage3}</div>
                   	<div class="clearfix"></div>
               	</div>
                <div class="lining-info-list-cont-cont">
                   <div class="lining-info-list-cont-left"><spring:message code="fabric.material"></spring:message>${fabric.fMaterial}</div>
                   	<div class="lining-info-list-cont-right"><spring:message code="fabric.weight"></spring:message>${fabric.fGProperty}g</div>
                   	<div class="clearfix"></div>
               	</div>
                <div class="lining-info-list-cont-cont">
                	<div class="lining-info-list-cont-left"><spring:message code="fabric.door"></spring:message>${fabric.fOrdinary}</div>
               		<div class="lining-info-list-cont-right"><spring:message code="fabric.total"></spring:message>${fabric.fSales}</div>
               		<div class="clearfix"></div>
           		</div>
               </div>
               <div class="lining-info-list-top">
               	<div class="lining-info-list-cont-cont">
                    <div class="lining-info-list-cont-left"><spring:message code="fabric.blarge"></spring:message><spring:message code="fabric.large"></spring:message></div>
                    <div class="lining-info-list-cont-right"><span>￥${fabric.fPrice}</span>/<spring:message code="fabric.largeNo"></spring:message></div>
                    <div class="clearfix"></div>
                  	</div>
                   <div class="lining-info-list-cont-cont">
                   	<div class="lining-info-list-cont-left"><spring:message code="fabric.bsmall"></spring:message><spring:message code="fabric.small"></spring:message></div>
                   	<div class="lining-info-list-cont-right"><span>￥${fabric.fPrice+15*fabric.fPrice/100}</span>/<spring:message code="fabric.smallNo"></spring:message></div>
                   	<div class="clearfix"></div>
                  	</div>
                   <div class="lining-info-list-cont-cont">
                   	<div class="lining-info-list-cont-left"><spring:message code="fabric.bclothVersion"></spring:message><spring:message code="fabric.clothVersion"></spring:message></div>
                   	<div class="lining-info-list-cont-right"><span>￥${fabric.fPrice+30*fabric.fPrice/100}</span>/<spring:message code="fabric.clothVersionNo"></spring:message></div>
                   	<div class="clearfix"></div>
                  </div>
               </div>
               <div class="lining-info-list-top">
               		
                  <div class="lining-info-list-cont-cont">
                   	<div class="lining-info-list-cont-left">
                   		<span class=""><spring:message code="fabric.price"></spring:message>：</span>
                       		${fabric.fPrice}<spring:message code="fabricCatalogue.price"></spring:message>
                   	</div>
                   	
                   	<div class="lining-info-list-cont-right">
                   		<span class="lining-info-list-num" style="color:#a3a1a1;"><spring:message code="fabric.num"></spring:message></span>
                       <input id="buyCount" type="text" class="spinner"/>
                   	</div>
                   	<div class="clearfix"></div>
                  </div>
                  
               	   <%-- <div class="lining-info-list-cont-title">
                       <span class=""><spring:message code="fabric.price"></spring:message>：</span>
                       		${fabric.fPrice}<spring:message code="fabricCatalogue.price"></spring:message>
                   </div>
                   <div class="lining-info-list-cont-title">
                       <span class="lining-info-list-num"><spring:message code="fabric.num"></spring:message></span>
                       <input id="buyCount" type="text" class="spinner"/>
                   </div> --%>
               </div>
               <div class="lining-button">
                   <button class="lining-buy" onclick="buyNow(3,${fabric.fId });"><spring:message code="fabric.buynow"></spring:message></button>
                   <button class="lining-cart" onclick="insertShoppingCart(3,${fabric.fId });"><spring:message code="fabric.joincart"></spring:message></button>
               </div>
           </div>
           <div class="clearfix"></div>
    </div>
    <div class="lining-info-list">
        <ul class="lining-info-left">
            <li>
                <div class="lining-info-left-co">
                    <img src="${pageContext.request.contextPath }/web/img/q1.jpg" />
                </div>
                <div class="lining-info-left-co-r">
                    <p><spring:message code="fabric.thickness"></spring:message></p>
                    <!--选择等级，百分比控制begin-->
                    <div class="star-percent actSlider">
                        <div class="star-per"></div>
                        <div class="star-bg" style='width:<c:choose><c:when test="${fabric.fThickness==1 }">20</c:when><c:when test="${fabric.fThickness==2 }">40</c:when><c:when test="${fabric.fThickness==3 }">60</c:when><c:when test="${fabric.fThickness==4 }">80</c:when><c:when test="${fabric.fThickness==5 }">100</c:when><c:otherwise>0</c:otherwise></c:choose>%'></div>
                    </div>
                    <!--选择等级，百分比控制end-->
                </div>
                <div class="clearfix"></div>
            </li>
            <li>
                <div class="lining-info-left-co">
                    <img src="${pageContext.request.contextPath }/web/img/q2.jpg" />
                </div>
                <div class="lining-info-left-co-r">
                    <p><spring:message code="fabric.softness"></spring:message></p>
                    <!--选择等级，百分比控制begin-->
                    <div class="star-percent actSlider">
                        <div class="star-per"></div>
                        <div class="star-bg" style="width:<c:choose><c:when test="${fabric.fSoft==1 }">20</c:when><c:when test="${fabric.fSoft==2 }">40</c:when><c:when test="${fabric.fSoft==3 }">60</c:when><c:when test="${fabric.fSoft==4 }">80</c:when><c:when test="${fabric.fSoft==5 }">100</c:when><c:otherwise>0</c:otherwise></c:choose>%"></div>
                    </div>
                    <!--选择等级，百分比控制end-->
                </div>
                <div class="clearfix"></div>
            </li>
            <li>
                <div class="lining-info-left-co">
                    <img src="${pageContext.request.contextPath }/web/img/q3.jpg" />
                </div>
                <div class="lining-info-left-co-r">
                    <p><spring:message code="fabric.water"></spring:message></p>
                    <!--选择等级，百分比控制begin-->
                    <div class="star-percent actSlider">
                        <div class="star-per"></div>
                        <div class="star-bg" style="width:<c:choose><c:when test="${fabric.fAbsorption==1 }">20</c:when><c:when test="${fabric.fAbsorption==2 }">40</c:when><c:when test="${fabric.fAbsorption==3 }">60</c:when><c:when test="${fabric.fAbsorption==4 }">80</c:when><c:when test="${fabric.fAbsorption==5 }">100</c:when><c:otherwise>0</c:otherwise></c:choose>%"></div>
                    </div>
                    <!--选择等级，百分比控制end-->
                </div>
                <div class="clearfix"></div>
            </li>
            <li>
                <div class="lining-info-left-co">
                    <img src="${pageContext.request.contextPath }/web/img/q4.jpg" />
                </div>
                <div class="lining-info-left-co-r">
                    <p><spring:message code="fabric.fFold"></spring:message></p>
                    <!--选择等级，百分比控制begin-->
                    <div class="star-percent actSlider">
                        <div class="star-per"></div>
                        <div class="star-bg" style="width: <c:choose><c:when test="${fabric.fFold==1 }">20</c:when><c:when test="${fabric.fFold==2 }">40</c:when><c:when test="${fabric.fFold==3 }">60</c:when><c:when test="${fabric.fFold==4 }">80</c:when><c:when test="${fabric.fFold==5 }">100</c:when><c:otherwise>0</c:otherwise></c:choose>%"></div>
                    </div>
                    <!--选择等级，百分比控制end-->
                </div>
                <div class="clearfix"></div>
            </li>
        </ul>
        <ul class="lining-info-left">
            <li>
                <div class="lining-info-left-co">
                    <img src="${pageContext.request.contextPath }/web/img/q5.jpg" />
                </div>
                <div class="lining-info-left-co-r">
                    <p><spring:message code="fabric.guangdu"></spring:message></p>
                    <!--选择等级，百分比控制begin-->
                    <div class="star-percent actSlider">
                        <div class="star-per"></div>
                        <div class="star-bg" style="width:<c:choose><c:when test="${fabric.fPhotometric==1 }">20</c:when><c:when test="${fabric.fPhotometric==2 }">40</c:when><c:when test="${fabric.fPhotometric==3 }">60</c:when><c:when test="${fabric.fPhotometric==4 }">80</c:when><c:when test="${fabric.fPhotometric==5 }">100</c:when><c:otherwise>0</c:otherwise></c:choose>%"></div>
                    </div>
                    <!--选择等级，百分比控制end-->
                </div>
                <div class="clearfix"></div>
            </li>
            <li>
                <div class="lining-info-left-co">
                    <img src="${pageContext.request.contextPath }/web/img/q6.jpg" />
                </div>
                <div class="lining-info-left-co-r">
                    <p><spring:message code="fabric.elasticity"></spring:message></p>
                    <!--选择等级，百分比控制begin-->
                    <div class="star-percent actSlider">
                        <div class="star-per"></div>
                        <div class="star-bg" style="width:<c:choose><c:when test="${fabric.fElastic==1 }">20</c:when><c:when test="${fabric.fElastic==2 }">40</c:when><c:when test="${fabric.fElastic==3 }">60</c:when><c:when test="${fabric.fElastic==4 }">80</c:when><c:when test="${fabric.fElastic==5 }">100</c:when><c:otherwise>0</c:otherwise></c:choose>%"></div>
                    </div>
                    <!--选择等级，百分比控制end-->
                </div>
                <div class="clearfix"></div>
            </li>
            <li>
                <div class="lining-info-left-co">
                    <img src="${pageContext.request.contextPath }/web/img/q7.jpg" />
                </div>
                <div class="lining-info-left-co-r">
                    <p><spring:message code="fabric.air"></spring:message></p>
                    <!--选择等级，百分比控制begin-->
                    <div class="star-percent actSlider">
                        <div class="star-per"></div>
                        <div class="star-bg" style="width:<c:choose><c:when test="${fabric.fBreathable==1 }">20</c:when><c:when test="${fabric.fBreathable==2 }">40</c:when><c:when test="${fabric.fBreathable==3 }">60</c:when><c:when test="${fabric.fBreathable==4 }">80</c:when><c:when test="${fabric.fBreathable==5 }">100</c:when><c:otherwise>0</c:otherwise></c:choose>%"></div>
                    </div>
                    <!--选择等级，百分比控制end-->
                </div>
                <div class="clearfix"></div>
            </li>
            <li>
                <div class="lining-info-left-co">
                    <img src="${pageContext.request.contextPath }/web/img/q8.jpg" />
                </div>
                <div class="lining-info-left-co-r">
                    <p><spring:message code="fabric.trans"></spring:message></p>
                    <!--选择等级，百分比控制begin-->
                    <div class="star-percent actSlider">
                        <div class="star-per"></div>
                        <div class="star-bg" style="width:<c:choose><c:when test="${fabric.fTransparent==1 }">20</c:when><c:when test="${fabric.fTransparent==2 }">40</c:when><c:when test="${fabric.fTransparent==3 }">60</c:when><c:when test="${fabric.fTransparent==4 }">80</c:when><c:when test="${fabric.fTransparent==5 }">100</c:when><c:otherwise>0</c:otherwise></c:choose>%"></div>
                    </div>
                    <!--选择等级，百分比控制end-->
                </div>
                <div class="clearfix"></div>
            </li>
        </ul>
    </div>
    <!--图文列表这里的样式应该是文本编辑器里客户自己设置的 begin-->
    <c:if test="${not empty picList }">
    <div class="lining-info-list pd-15">
    	<c:forEach items="${picList }" var="pic">
        	<img src="${pageContext.request.contextPath }/upload/${pic.fpImg }" />
        </c:forEach>
    </div>
    </c:if>
    <div class="clearfix"></div>
    <!--图文列表 end-->
    <form method="post" action="${pageContext.request.contextPath}/web/orders/viewinsertorders" id="form">
		<input type="hidden" id="pId" name="pId" value="">
		<input type="hidden" id="ppId" name="ppId" value="">
		<input type="hidden" id="fId" name="fId" value="">
		<input type="hidden" id="size" name="size" value=""> 
		<input type="hidden" id="status" name="status" value="">
		<input type="hidden" id="colorImg" name="colorImg" value='<c:forEach items="${colorPic }" var="color" varStatus="c"><c:if test="${c.index==0 }">${color.fmpImg}</c:if></c:forEach>'>
	</form>
</c:if>
</div>
<!--列表 end-->
<jsp:include page="../main/bottom.jsp"></jsp:include>
<!--购物车-->
<script type="text/javascript" src="${pageContext.request.contextPath }/web/js/jquery.spinner.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/2.1/layer.js"></script>
<script type="text/javascript">
	//颜色选择
	$(".sel_div ul").css("width",84*$(".sel_div ul").find("li").length);
	/* $(".sel_div ul li").click(function(){
		$(this).addClass("on").siblings().removeClass("on");
		alert($(this).val());
		$("#colorImg").val($(this).val());
	}); */
	function check(obj){
		$(obj).addClass("on").siblings().removeClass("on");
		$("#colorImg").val($(obj).attr('id'));
	}
	$("span.ri_arrow").click(function(){
		var str = $(".sel_div ul").css("left");
		var width = $(".sel_div ul").css("width").substr(0,$(".sel_div ul").css("width").length-2);
		var left = str.substr(0,str.length-2);
		var num = Math.abs(left);
		if(num < (width - 450)){//不要空白超过两个箭头之间的距离450。
			
			$(".sel_div ul").css("left",str.substr(0,str.length-2)-84);
		}else{
			$(".sel_div ul").css("left",0);
		}
	});
	$("span.le_arrow").click(function(){
		var str = $(".sel_div ul").css("left");
		var width = $(".sel_div ul").css("width").substr(0,$(".sel_div ul").css("width").length-2);
		var left = str.substr(0,str.length-2);
		var num = Math.abs(left);
		if(num == 0){
			
		}else{
			if(num < (width-84*2)){
				$(".sel_div ul").css("left",parseInt(str.substr(0,str.length-2))+84);
			 }else{
				$(".sel_div ul").css("left",0);
			 } 
		}
	});

    $('.spinner').spinner();
    //直接购买
    function buyNow(status,fId){
    	var count=$("#buyCount").val();
    	var color=$("#colorImg").val();
    	if(color==""||color==null){
    		layer.msg('<spring:message code="fabric.colorError"></spring:message>',{icon:0,time:1000});
    		return false;
    	}
    	if(count>0){
			$("#fId").val(fId);
			$("#size").val(count);
			$("#status").val(status);
			$.ajax( {  
        		type : "POST",  
                 url : "${pageContext.request.contextPath }/web/member/isLogin",
                 success: function(data) {
                	 if(data){
                		 $("#form").submit();
                	 }else{
                		 var href ="${pageContext.request.contextPath }/web/member/login?redirectUrl=" + encodeURIComponent(window.location.href);
                		 layer.confirm('<spring:message code="member.nologin"></spring:message>', {
      			        	  btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>','<spring:message code="flowertypecatalog.unagree"></spring:message>'], //按钮
      			        	  title:'<spring:message code="flowertypecatalog.message"></spring:message>'
      			        	}, function(index){
      			        		location.href = href;
      			        		layer.close(index);
      			        	},function(index){
      			        		layer.close(index);
      			        	});
                	 }
                 }
        	});
    	}
    }
    //加入购物车
    function insertShoppingCart(status,fId){
    	var count=$("#buyCount").val();
    	var color=$("#colorImg").val();
    	if(color==""||color==null){
    		layer.msg('<spring:message code="fabric.colorError"></spring:message>',{icon:0,time:1000});
    		return false;
    	}
    	if(count>0){
    		$.ajax( {  
        		type : "POST",  
                 url : "${pageContext.request.contextPath }/web/shoppingcart/insertshoppingcart",
                 data : {status:status,fId:fId,size:count,colorImg:color},
                 success: function(data) {
                	 if(data.msg.status==0){
                		 layer.msg('<spring:message code="member.sucjoincart"></spring:message>',{icon:1,time:1000});
                	 }
                 }
        	});
    	}
    }
</script>
</body>
</html>